import '../styles/Login.scss'
import Left from '../images/left.svg'
import right from '../images/right.svg'
import {Form,Input,Button,Select,notification} from 'antd'
import React,{useState,useEffect} from 'react';
import {patient_login,patient_register,patient_update} from '../utils/api'
import {useNavigate} from 'react-router-dom'
import axios from 'axios'

interface Props{
    get:any
    loginUserList:object
}
function Login(props:Props) {
    var navigate = useNavigate()
    useEffect(()=>{
        console.log(props.loginUserList);
        
    },[])
    const onFinish = (value:any)=>{
        var obj = {phone:value.phone,pass:value.pass}

        patient_login(value).then((res)=>{
            console.log(res)
            if(res.data.length !== 0){
                notification.success({message:'登录成功'});
                localStorage.setItem('userid', res.data[0].id);
                localStorage.setItem('token',res.data[0].token);
                localStorage.setItem('userinfo', JSON.stringify(res.data[0].userinfo));
                navigate('/index');//跳转主页
            }else{
                notification.success({message:'登录失败'});
            }
        })
        // axios.get(`/postsgllone?userinfo.phone=${value.phone}&userinfo.pass=${value.pass}`).then((res)=>{
        //     console.log(res)
        //     if(res.data.length !== 0){
        //         notification.success({message:'登录成功'});
        //         // var token = res.data[0].token
        //         // var userinfo = res.data[0].userinfo
        //         // console.log(token)
        //         // console.log(res.data[0].userinfo)
        //         localStorage.setItem('token',res.data[0].token);
        //         localStorage.setItem('userinfo', JSON.stringify(res.data[0].userinfo));
        //         navigate('/index');//跳转主页
        //     }else{
        //         notification.success({message:'登录失败'});
        //     }
        // })
    }
    // 没有账号跳转注册页
    var toregister = ()=>{
        navigate('/register')
    }
    return (
        <div className='login'>
            <div className='left'>
                <img src={Left}/>
            </div>
            <div className='center'>
                <div className="text">
                    <h2>登录</h2>
                    <h5>九尾医疗服务后台管理系统</h5>
                </div>
                <div className='import'>
                <Form
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 18 }}
                onFinish={onFinish}
                >
                  
                    <Form.Item
                        label="账号"
                        name="phone"
                        rules={[{ required: true, message: '输入手机号' ,pattern:/^1[3-9]\d{9}$/}]}
                    >
                        <Input placeholder='请输入正确的手机号'/>
                    </Form.Item>

                    <Form.Item
                        label="密码"
                        name="pass"
                        rules={[{ required: true, message: '输入密码' ,pattern:/^.{3,11}$/}]}
                    >
                        {/* <Input.Password placeholder='输入密码'/> */}
                        <Input placeholder='输入密码'/>
                    </Form.Item>
                    <div className='contect'>
                        <span>忘记密码请联系管理员</span>
                    </div>
                    <Form.Item wrapperCol={{ offset: 4, span: 16 }}>
                        <Button type="primary" htmlType="submit">登录</Button>
                    </Form.Item>
                </Form>
                </div>
                <span onClick={toregister} className="toregister">注册</span>
            </div>
            <div className='right'>
                <img src={right}/>
            </div>
        </div>
    );
}

export default Login;
// export default connect(
//     (state:any)=>{//注入(绑定)store中的数据到组件的props中
//         return {
//             loginUserList :state.loginUserList
//         }
//     },
//     (dispatch)=>{//注入(绑定)方法到组件的props中
//         return {
//             get:function(payload:any){
//                 dispatch(create_user_action(payload))
//             }
            
//         }
//     }
// )(Login)